<template>
	<view class="ikz-glist" :style="'margin-top:'+css_info.margin_top+'upx;'">
		<view class="ikz-sticky-box" id="ikz-sticky-box">
			<view class="ikz-sticky-title" v-if="showType.list.length">
				<text class="ikz-textcenter"
					:style="current == -1 ? 'font-weight: 800;color: #FDAF66;border-bottom:6rpx solid #FDAF66;':''"
					@click="change" :data-index="-1" :data-id="0">全部</text>
			</view>
		<!-- 	<view class="ikz-sticky-title" v-else>
				<text class="ikz-textcenter" style="font-weight: 800;color: #000;" :data-id="0">接单列表</text>
			</view> -->
			<view class="ikz-sticky-title" v-for="(item,index) in showType.list" :key="index">
				 <text  
				    v-if="!(item.server_name === '同城商店' || item.server_name === '同城讯息')"  
				    class="ikz-textcenter"  
				    :style="current == index ? 'font-weight: 800;color: #FDAF66;border-bottom:6rpx solid #FDAF66;' : ''"  
				    @click="change"  
				    :data-index="index"   
				    :data-id="item.id"  
				  >   
				    {{ item.server_name }}  
				  </text>  
			</view>
		</view>
		<view class="ikz-box">
			<view class="ikz-sticky-item" v-for="(item,index) in showData.list" :key="index"
				@click="godetail(item.id,item.status)">
				<view class="ikz-sticky-top"> 
					<view class="ikz-sticky-head">
						<image class="ikz-sticky-img" :src="item.avatar"></image>
					</view>
					<view class="ikz-sticky-head-right">
						<view class="ikz-sticky-head-right-box">
							<view class="ikz-sticky-head-name">
								{{item.nickname}}
							</view>
							<view class="ikz-sticky-head-time">
								{{item.time}}
							</view>
						</view>
						<view class="ikz-sticky-head-right-box">
							<view class="ikz-sticky-head-card">	
								{{item.type_text}}
							</view>

						</view>
					</view>
				</view>
				<view class="ikz-sticky-content" v-if="item.information">
					期望送达：{{item.hope_arrive}}
					<!-- hope_arrive -->
				</view>
				<view>
					<view class="ikz-sticky-end">
						<view class="ikz-sticky-start" v-if="item.game_platform">
							<view class="ikz-sticky-spot2"></view>
							游戏名称：{{item.game_platform}}
						</view>
					</view>
					<view class="ikz-sticky-end">
						<view class="ikz-sticky-start" v-if="item.game_time">
							<view class="ikz-sticky-spot1"></view>
							游戏时长：{{item.game_time}}
						</view>
					</view>
					<view class="ikz-sticky-end">
						<view class="ikz-sticky-start" v-if="item.receive_limit">
							<view class="ikz-sticky-spot"></view>
							游戏限制：{{item.receive_limit}}
						</view>
					</view>
					<view class="ikz-sticky-end">
						<view class="ikz-sticky-start" v-if="item.expected_delivery_time">
							<view class="ikz-sticky-spot"></view>
							预计交货时间：{{item.expected_delivery_time}}
						</view>
					</view>

					<!-- <view class="ikz-sticky-end">
						<view class="ikz-sticky-start" v-if="item.lease_duration">
							<view class="ikz-sticky-spot2"></view>
							租借时长：{{item.lease_duration}}
						</view>
					</view> -->
					<!-- <view class="ikz-sticky-end">
						<view class="ikz-sticky-start" v-if="item.hope_arrive">
							<view class="ikz-sticky-spot2"></view>
							期望送达：{{item.hope_arrive}}
						</view>
					</view> -->
					<!-- <view class="ikz-sticky-start" v-if="item.start">
						<view class="ikz-sticky-spot"></view>
						起点：{{item.start}}
					</view> -->
					<!-- <view class="ikz-sticky-end">
						<view class="ikz-sticky-start" v-if="item.destination">
							<view class="ikz-sticky-spot1"></view>
							目的地：{{item.destination}} 
						</view>
					</view> -->
					<view style="width: 200%;height: 1px;background-color: #cfcfcf;transform:translateX(-10%);margin: 20rpx 0rpx 20rpx 0rpx;"></view>
					<view style="display: flex;justify-content: space-between;">
						<view >
							<text >
								订单金额<text v-if="item.type_text !== '帮办'" class="ikz-sticky-head-price2">￥{{item.price}}</text>
							</text>
						</view> 
						<view  v-if="receiver == 1">
							预估收益<text class="ikz-sticky-head-price">￥{{item.total_fee}}</text>
						</view>
						<view class="ikz-sticky-buttom">
							<view class="ikz-sticky-btn" v-if="item.status == 1">需要帮助</view>
							<view class="ikz-sticky-btn" style="background: #FB7A26" v-if="item.status == 2">待完成</view>
							<view class="ikz-sticky-btn" style="background: #cfcfcf" v-if="item.status == 3">已完成</view>
							<view class="ikz-sticky-btn" style="background: #cfcfcf" v-if="item.status == 7">已送达</view>
						</view>

					</view>

				</view>
			</view>
		</view>
		<view class="ikz-more" v-if="moreStatus == 4">
			——我也是有底线的——
		</view>
		<view class="ikz-more" v-if="moreStatus == 5">
			<view style="display: flex;flex-direction: column;align-items: center;color: #999999;font-size: 24rpx;">
				<image class="ikz-empty" src="/static/empty.png"></image>
				暂无数据~
			</view>
		</view>
	</view>
</template>

<script>
	import ikz from "@/pages/Common/tools"
	export default {
		name: 'glist',
		props: {
			showType: {
				type: Object,
			},
			showData: {
				type: Object,
			},
			cssData: {
				type: Object,
			},
			moreStatus: {
				type: String,
			},
			typeIndex: {
				type: String,
			},
			receiver: {
				type: String,
			},
		},
		data() {
			return {
				duration: 500,
				current: -1,
				css_info: {
					margin_top: 0,
				},
				winHeight: 0,
				scroll_status: true,
				scrollTop: 0,
			};
		},
		watch: {
			showType: {
				handler(newName, oldName) {
					this.current = -1
				},
				immediate: true,
				deep: true
			},
			typeIndex: {
				handler(newName, oldName) {
					if (newName == '') {
						this.current = 0;
					} else if (newName == 0) {
						this.current = 1;
					} else if (newName == 1) {
						this.current = 2;
					} else if (newName == 2) {
						this.current = 3;
					} else if (newName == 3) {
						this.current = 5;
					} else if (newName == 4) {
						this.current = 4;
					}
				},
				immediate: true,
				deep: true
			}
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#ikz-sticky-box').boundingClientRect(data => {
				this.$emit('returnglist', data.top);
			}).exec();
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.winHeight = res.windowHeight;
				}
			});
		},
		methods: {
			typeFilter(e){
				console.log(e);
				if(e == 1){
					return '帮送'
				}else if(e==2){
					return '帮取'
				}else if(e==3){
					return '3333333'
				}else if(e==4){
					return '帮买'
				}else if(e==6){
					return '贴吧'
				}else if(e==10){
					return '帮办'
				}
			},
			godetail(id, status) {
				if (!uni.getStorageSync('local_user_session')) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
					return
				} 
				if (status == 1) {
					if(uni.getStorageSync('receivers') == 1){
						uni.navigateTo({
							url: '/pages/Component/Module/Campus/Program/Order/detail/index?id=' + id
						})
					}
					
				}
			},
			change: function(e) {
				if (e.currentTarget.dataset.index == undefined) {
					this.current = -1;
				} else {
					this.current = e.currentTarget.dataset.index;
				}
				this.$emit('returnId', e.currentTarget.dataset.id)
			},

		}
	};
</script>

<style>
	.ikz-sticky-box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		position: -webkit-sticky;
		/* #endif */
		position: sticky;
		top: var(--window-top);
		z-index: 999;
		flex-direction: row;
		margin: 0px;
		padding: 15px 0 15px 0;
		white-space: nowrap;
		overflow-x: auto;
		background: #fff;
	}

	.ikz-sticky-title {
		box-sizing: border-box;
		padding: 0 20rpx;
		display: inline-block;
		text-align: center;
	}

	.ikz-textcenter {
		padding-bottom: 10rpx;
	}

	/* list */
	.ikz-sticky-item-box {
		overflow-x: auto;
	}

	.ikz-sticky-item {
		overflow: hidden;
		box-sizing: border-box;
		padding: 30rpx;
		width: 95%;
		margin: 0 auto 20rpx;
		background: #F9F9F9;
		border-radius: 15rpx;
	}

	.ikz-sticky-top {
		display: flex;
		align-items: center;
	}

	.ikz-sticky-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.ikz-sticky-head-right {
		margin-left: 20rpx;
		width: 85%;
	}

	.ikz-sticky-head-right-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 50rpx;
	}

	.ikz-sticky-head-time {
		color: #888;
		font-size: 25rpx;
	}

	.ikz-sticky-head-card {
		background-color: #FDAF64;
		color: #fff;
		font-size: 23rpx;
		border-radius: 15rpx;
		padding: 0px 10rpx;
		text-align: center;
		line-height: 45rpx;

	}

	.ikz-sticky-head-price {
		color: #FDAF64;
	}
	.ikz-sticky-head-price2 {
		color: red;
	}

	.ikz-sticky-content {
		line-height: 45rpx;
		font-size: 30rpx;
		margin: 15rpx 0;
	}

	.ikz-sticky-head-name {
		font-size: 28rpx;
	}

	.ikz-sticky-start {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		line-height: 50rpx;
	}

	.ikz-sticky-spot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #76A8FD;
		margin-right: 20rpx;
	}

	.ikz-sticky-spot1 {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #FF8800;
		margin-right: 20rpx;
	}

	.ikz-sticky-spot2 {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #009423;
		margin-right: 20rpx;
	}

	.ikz-sticky-end {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ikz-sticky-buttom {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.ikz-sticky-btn {
		background: #42D5BE;
		color: #fff;
		padding: 0 20rpx;
		border-radius: 15rpx;
		line-height: 50rpx;
		font-size: 26rpx;
	}

	.ikz-more {
		width: 100%;
		text-align: center;
		line-height: 50rpx;
		color: #999999;
		padding-bottom: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
	}

	.ikz-empty {
		width: 150rpx;
		height: 150rpx;
		margin-bottom: 20rpx;
		margin-top: 77rpx;
	}
</style>